<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    :close-on-click-modal="false"
    v-bind="$props"
  >
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="云打印收费标准" name="first">
        <div style="margin:0 0 0;float:right">
          <el-button type="primary" plain @click="openAddAreaCloudType">
            新增云打印收费标准
          </el-button>
        </div>
        <el-table
          :data="dataAreaRates.cloudPrintType"
          class="table"
          :highlight-current-row="select_row"
          :height="tableHeight"
          :max-height="tableHeight"
          :default-sort="{prop: 'date', order: 'descending'}"
          @row-click="rowClick"
          @current-change="rowEdit"
        >
          <el-table-column
            prop="sort"
            label="排序"
            sortable
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.sort" size="small" placeholder="请输入排序" @click.stop.native="" />
              <span v-else>{{ row.sort }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="类型"
            :filter-multiple="false"
            :filters="[{ text: '文件打印', value: 0 }, { text: '图片打印', value: 1 }]"
            :filter-method="filterType"
          >
            <template slot-scope="{ row }">
              <el-select v-if="row.edit" v-model="row.type" size="small" placeholder="请选择类型" @click.stop.native="">
                <el-option
                  v-for="item in typeShow"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
              <span v-else>{{ type[row.type] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="云打印名称"
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.name" size="small" placeholder="请输入排序" @click.stop.native="" />
              <span v-else>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="describe"
            label="描述"
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.describe" size="small" placeholder="请输入排序" @click.stop.native="" />
              <span v-else>{{ row.describe }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="one_side_unit_price"
            label="单面打印单价"
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.one_side_unit_price" size="small" placeholder="请输入排序" @click.stop.native="" />
              <span v-else>{{ row.one_side_unit_price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="two_side_unit_price"
            label="双面打印单价"
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.two_side_unit_price" size="small" placeholder="请输入排序" @click.stop.native="" />
              <span v-else>{{ row.two_side_unit_price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="是否彩印"
            :filter-multiple="false"
            :filters="[{ text: '否', value: 0 }, { text: '是', value: 1 }]"
            :filter-method="filterIsColorfulPrint"
          >
            <template slot-scope="{ row }">
              <el-select v-if="row.edit" v-model="row.is_colorful_print" size="small" placeholder="请选择是否彩印" @click.stop.native="">
                <el-option
                  v-for="item in isColorfulPrintText"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
              <el-tag
                v-else
                :type="row.is_colorful_print ? 'success': 'danger'"
              >
                {{ row.is_colorful_print ? '是': '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="width"
            label="宽"
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.width" size="small" placeholder="请输入排序" @click.stop.native="" />
              <span v-else>{{ row.width }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="height"
            label="高"
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.height" size="small" placeholder="请输入排序" @click.stop.native="" />
              <span v-else>{{ row.height }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            sortable
          />
          <el-table-column
            label="是否显示"
            :filter-multiple="false"
            :filters="[{ text: '否', value: 0 }, { text: '是', value: 1 }]"
            :filter-method="filterIsShow"
          >
            <template slot-scope="{ row }">
              <el-select v-if="row.edit" v-model="row.is_show" size="small" placeholder="请选择是否显示" @click.stop.native="">
                <el-option
                  v-for="item in isShowText"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
              <el-tag
                v-else
                :type="row.is_show ? 'success': 'danger'"
              >
                {{ row.is_show ? '是': '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="160px">
            <template slot-scope="{ row }">
              <el-button v-if="row.edit" type="success" icon="el-icon-check" @click.stop="closeClick(row)" />
              <el-button type="danger" icon="el-icon-close" @click.stop="deleteAreaCloudType(row)" />
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          width="900px"
          title="新增云打印收费标准"
          :visible.sync="innerVisible"
          append-to-body
        >
          <el-form
            ref="addAreaCloudTypeForm"
            :model="add_area_cloud_type"
            status-icon
            size="mini"
            label-width="110px"
          >
            <!-- <el-form-item prop="consumable_type" :rules="rules.select" label="耗材类型">
              <el-select v-model="change_cloud_printer_operating_record.consumable_type" placeholder="请选择耗材类型">
                <el-option
                  v-for="item in consumable_type"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item> -->
            <el-form-item prop="name" :rules="rules.type" label="类型">
              <el-radio-group v-model="add_area_cloud_type.type">
                <el-radio :label="0">文件打印</el-radio>
                <el-radio :label="1">图片打印</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="name" :rules="rules.input" label="云打印名称">
              <el-input v-model="add_area_cloud_type.name" placeholder="请输入云打印名称" clearable />
            </el-form-item>
            <el-form-item prop="describe" :rules="rules.input" label="描述">
              <el-input v-model="add_area_cloud_type.describe " placeholder="请输入描述" clearable />
            </el-form-item>
            <el-form-item prop="one_side_unit_price" :rules="rules.input" label="单面打印单价">
              <el-input v-model="add_area_cloud_type.one_side_unit_price " placeholder="请输入单面打印单价" clearable />
            </el-form-item>
            <el-form-item prop="two_side_unit_price" :rules="rules.input" label="双面打印单价">
              <el-input v-model="add_area_cloud_type.two_side_unit_price " placeholder="请输入双面打印单价" clearable />
            </el-form-item>
            <el-form-item prop="is_colorful_print" :rules="rules.select" size="mini" label="彩色打印">
              <el-radio-group v-model="add_area_cloud_type.is_colorful_print" size="mini">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="0">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="width" :rules="rules.input" label="宽（毫米）">
              <el-input v-model="add_area_cloud_type.width " placeholder="请输入宽（毫米）" clearable />
            </el-form-item>
            <el-form-item prop="height" :rules="rules.input" label="高（毫米）">
              <el-input v-model="add_area_cloud_type.height " placeholder="请输入高（毫米）" clearable />
            </el-form-item>
            <el-form-item prop="sort" :rules="rules.input" label="排序">
              <el-input v-model="add_area_cloud_type.sort " placeholder="请输入排序" clearable />
            </el-form-item>
            <el-form-item prop="is_show" :rules="rules.select" size="mini" label="是否显示">
              <el-radio-group v-model="add_area_cloud_type.is_show" size="mini">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="0">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="innerVisible=false">取 消</el-button>
            <el-button size="mini" type="primary" @click="addAreaCloudType">保 存</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="需求收费标准" name="second">
        <div style="margin:0 0 0;float:right">
          <el-button type="primary" plain @click="openAddAreaDemandType">
            新增需求收费标准
          </el-button>
        </div>
        <el-table
          :data="dataAreaRates.demandType"
          class="table"
          :highlight-current-row="select_row"
          :height="tableHeight"
          :max-height="tableHeight"
          :default-sort="{prop: 'date', order: 'descending'}"
          @row-click="rowClick"
          @current-change="rowEdit"
        >
          <el-table-column
            prop="sort"
            label="排序"
            sortable
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.sort" size="small" placeholder="请输入排序" @click.stop.native="" />
              <span v-else>{{ row.sort }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="type"
            label="类型"
          /> -->
          <el-table-column
            prop="name"
            label="需求类型名称"
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.name" size="small" placeholder="请输入需求类型名称" @click.stop.native="" />
              <span v-else>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="describe"
            label="需求描述"
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.describe" size="small" placeholder="请输入需求描述" @click.stop.native="" />
              <span v-else>{{ row.describe }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            sortable
          >
            <template scope="{ row }">
              <el-input v-if="row.edit" v-model="row.price" size="small" placeholder="请输入价格" @click.stop.native="" />
              <span v-else>{{ row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            sortable
          />
          <el-table-column
            label="是否显示"
            :filter-multiple="false"
            :filters="[{ text: '否', value: 0 }, { text: '是', value: 1 }]"
            :filter-method="filterIsShow"
          >
            <template slot-scope="{ row }">
              <el-select v-if="row.edit" v-model="row.is_show" size="small" placeholder="请选择是否显示" @click.stop.native="">
                <el-option
                  v-for="item in isShowText"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
              <el-tag
                v-else
                :type="row.is_show ? 'success': 'danger'"
              >
                {{ row.is_show ? '是': '否' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="160px">
            <template slot-scope="{ row }">
              <el-button v-if="row.edit" type="success" icon="el-icon-check" @click.stop="closeClick(row)" />
              <el-button type="danger" icon="el-icon-close" @click.stop="deleteAreaDemandType(row)" />
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          width="900px"
          title="新增区域发布需求收费标准"
          :visible.sync="orderInnerVisible"
          append-to-body
        >
          <el-form
            ref="addAreaDemandTypeForm"
            :model="add_area_demand_type"
            status-icon
            size="mini"
            label-width="110px"
          >
            <el-form-item prop="name" :rules="rules.input" label="需求名称">
              <el-input v-model="add_area_demand_type.name" placeholder="请输入需求名称" clearable />
            </el-form-item>
            <el-form-item prop="describe" :rules="rules.input" label="描述">
              <el-input v-model="add_area_demand_type.describe " placeholder="请输入描述" clearable />
            </el-form-item>
            <el-form-item prop="price" :rules="rules.input" label="价格">
              <el-input v-model="add_area_demand_type.price " placeholder="请输入价格" clearable />
            </el-form-item>
            <el-form-item prop="sort" :rules="rules.input" label="排序">
              <el-input v-model="add_area_demand_type.sort " placeholder="请输入排序" clearable />
            </el-form-item>
            <el-form-item prop="is_show" :rules="rules.select" size="mini" label="是否显示">
              <el-radio-group v-model="add_area_demand_type.is_show" size="mini">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="0">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="orderInnerVisible=false">取 消</el-button>
            <el-button size="mini" type="primary" @click="addAreaDemandType">保 存</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <!-- <el-button size="mini" @click="purchaseOrderDialog = false">取 消</el-button> -->
      <el-button v-if="tabText === '云打印收费标准'" size="mini" type="primary" @click="updateAreaCloudType">保 存</el-button>
      <el-button v-else size="mini" type="primary" @click="updateAreaDemandType">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addAreaCloudType, updateAreaCloudType, addAreaDemandType, updateAreaDemandType, deleteAreaCloudType, deleteAreaDemandType } from '@/api/region.js'
import { showMixin } from '@/mixins/show'
import { Dialog, Table } from 'element-ui'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  directives: { elDragDialog },
  mixins: [showMixin],
  props: {
    ...Dialog.props,
    dataAreaRates: {
      type: Object,
      default: () => {}
    },
    areaId: {
      type: Number,
      default: () => ''
    },
    list: {
      type: Array,
      default: () => [{ date: 'false' }, { date: 'false' }]
      // default: [
      //   { date: 'false' },
      //   { date: 'false' }
      // ]
    },
    // 确定文本
    confirmText: {
      type: String,
      default: '保存'
    },
    // 取消文本
    cancelText: {
      type: String,
      default: '取消'
    }
  },
  data() {
    return {
      // table高度自适应
      tableHeight: window.innerHeight - 264,

      // 行内编辑绑定值
      select_row: '',
      // 新增云需求收费标准Dialog
      innerVisible: false,
      // 新增区域发布需求收费标准Dialog
      orderInnerVisible: false,
      type: {
        0: '文件打印',
        1: '图片打印'
      },
      typeShow: [
        { text: '文件打印', value: 0 },
        { text: '图片打印', value: 1 }
      ],
      // 新增区域云打印收费标准参数
      add_area_cloud_type: {
        area_id: '',
        type: 0,
        name: '',
        describe: '',
        one_side_unit_price: '',
        two_side_unit_price: '',
        is_colorful_print: '',
        width: '',
        height: '',
        sort: ''
      },
      // 修改云打印收费标准
      up_date_area_cloud_type: {
        cloudPrintTypeJson: []
      },
      // 是否彩印显示
      is_colorful_print: {
        0: { color: 'danger', label: '否' },
        1: { color: 'success', label: '是' }
      },
      isColorfulPrintText: [
        { text: '否', value: 0 },
        { text: '是', value: 1 }
      ],
      // 是否显示或隐藏
      is_show: {
        0: { color: 'danger', label: '否' },
        1: { color: 'success', label: '是' }
      },
      isShowText: [
        { text: '否', value: 0 },
        { text: '是', value: 1 }
      ],
      // 定义tab
      tabText: '云打印收费标准',
      get_area_rates: {
        area_id: ''
      },
      data_area_rates: {
        data: []
      },
      activeName: 'first',
      options: [
        { label: 'A4黑白', dec: '', value: '1' },
        { label: 'A4彩色', dec: '', value: '2' }
      ],
      isEdit: false,
      currentList: [],
      params: {
        id: '',
        keywords: '',
        price: 0
      },
      // 新增区域发布需求收费标准参数
      add_area_demand_type: {
        area_id: '',
        name: '',
        describe: '',
        price: '',
        sort: '',
        is_show: ''
      },
      // 初始状态下
      defaultParams: {},
      // 表单校验规则
      rules: {
        input: { required: true, message: '请完成输入！', trigger: 'blur' },
        select: { required: true, message: '请完成选择！', trigger: 'blur' },
        image: { required: true, message: '请完成输入！', trigger: 'blur' }
      }
    }
  },
  watch: {
    list(value) {
      this.currentList = value
    }
  },
  mounted() {
    this.defaultParams = Object.assign({}, this.params)
  },
  methods: {
    // typeShow(data) {
    //   const type = this.type.filter(v => {
    //     if (v.value === data) {
    //       return v.label
    //     }
    //   })
    //   return type[0].label
    // },
    // getAreaRates() {
    //   getAreaRates(this.get_area_rates).then(res => {
    //     this.data_area_rates.data = res.result.showing
    //   })
    // },
    // 打开新增区域云打印收费标准
    openAddAreaCloudType() {
      this.add_area_cloud_type = {
        area_id: this.areaId,
        type: 0,
        name: '',
        describe: '',
        one_side_unit_price: '',
        two_side_unit_price: '',
        is_colorful_print: 1,
        width: '',
        height: '',
        sort: '',
        is_show: 1
      }
      this.innerVisible = true
    },
    // 新增区域云打印收费标准
    addAreaCloudType() {
      this.$refs.addAreaCloudTypeForm.validate(valid => {
        if (valid) {
          addAreaCloudType(this.add_area_cloud_type).then(res => {
            this.$emit('getAreaRates')
            this.innerVisible = false
            this.$notify({
              title: '成功',
              message: '保存区域云打印收费标准成功！',
              type: 'success'
            })
          })
        } else {
          return false
        }
      })
    },
    // 修改区域云打印收费标准
    updateAreaCloudType() {
      updateAreaCloudType({ cloudPrintTypeJson: this.dataAreaRates.cloudPrintType }).then(res => {
        this.$emit('getAreaRates')
        this.$notify({
          title: '成功',
          message: '修改云打印收费标准成功！',
          type: 'success'
        })
      })
    },
    //  删除区域云打印机收费标准（逻辑删除）
    deleteAreaCloudType(row) {
      this.$confirm('此操作将删除该收费标准，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteAreaCloudType({ cloud_print_type_id: row.cloud_print_type_id }).then(res => {
          this.$emit('getAreaRates')
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    // tab
    handleClick(tab, event) {
      this.tabText = tab.label
    },
    // 打开新增区域发布需求收费标准
    openAddAreaDemandType() {
      this.add_area_demand_type = {
        area_id: this.areaId,
        name: '',
        describe: '',
        price: '',
        sort: '',
        is_show: 1
      }
      this.orderInnerVisible = true
    },
    // 新增区域发布需求收费标准
    addAreaDemandType() {
      this.$refs.addAreaDemandTypeForm.validate(valid => {
        if (valid) {
          addAreaDemandType(this.add_area_demand_type).then(res => {
            this.$emit('getAreaRates')
            this.orderInnerVisible = false
            this.$notify({
              title: '成功',
              message: '保存区域需求收费标准成功！',
              type: 'success'
            })
          })
        } else {
          return false
        }
      })
    },
    // 修改区域需求收费标准
    updateAreaDemandType() {
      updateAreaDemandType({ demandTypeJson: this.dataAreaRates.demandType }).then(res => {
        this.$emit('getAreaRates')
        this.$notify({
          title: '成功',
          message: '修改需求收费标准成功！',
          type: 'success'
        })
      })
    },
    //  删除区域云打印机收费标准（逻辑删除）
    deleteAreaDemandType(row) {
      this.$confirm('此操作将删除该收费标准，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteAreaDemandType({ demand_type_id: row.demand_type_id }).then(res => {
          this.$emit('getAreaRates')
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    /**
       * 添加
       */
    addEvent() {
      this.isEdit = false
      this.innerVisible = true
    },
    /**
       * 编辑
       */
    editEvent(row, index) {
      this.isEdit = true
      this.params = {
        index: index,
        id: row.id,
        keywords: row.keywords,
        price: row.price
      }
      this.innerVisible = true
    },
    /**
       * 删除负责人
       * @param row 行内容
       * @param rowIndex 下表
       */
    deleteEvent(row, rowIndex) {
      // 调用接口删除
      this.currentList.splice(rowIndex, 1)
    },
    /**
       * 取消事件
       */
    handleClose() {
      this.show = false
    },
    handleInnerClose() {
      this.innerVisible = false
      this.params = this.defaultParams
    },
    confirmInnerEvent() {
      const params = this.params
      // 检测是否已存在商品
      const result = this.currentList.some(v => {
        return params.keywords === v.keywords
      })
      if (!result) {
        if (this.isEdit) {
          this.$set(this.currentList, params.index, params)
          // 调用接口 修改
          this.$emit('confirmEdit', params)
          // 回调 关闭内弹窗
          this.handleInnerClose()
        } else {
          // 调用接口 添加
          this.$emit('confirmAdd', params)
          this.currentList.push(params)
          // 回调 关闭内弹窗
          this.handleInnerClose()
        }
      } else {
        this.$message({
          type: 'info',
          message: '检测到该项目已存在在收费标准列表内'
        })
      }
    },

    // 本地筛选
    filterType(value, row) {
      return row.type === value
    },
    filterIsColorfulPrint(value, row) {
      return row.is_colorful_print === value
    },
    filterIsShow(value, row) {
      return row.is_show === value
    },
    // 行内编辑
    rowClick(row) {
      row.edit = !row.edit
      if (this.select_row === false) {
        this.select_row = row.edit
      }
    },
    closeClick(row) {
      row.edit = false
      this.select_row = false
    },
    rowEdit(currentRow, oldCurrentRow) {
      if (oldCurrentRow !== null) {
        oldCurrentRow.edit = false
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
